@model OurWedding1.Models.WeddingDetailsViewModel
@using OurWedding1

@{
    ViewBag.Title = Model.Wedding.Name;
}

@Html.Partial("_Details", Model)


<div id="toolbar" class="ui-widget-header ui-corner-all">
    @Html.ActionLink(Resources.Edit, "Edit", new { id = Model.Wedding.WeddingId }, new { @class = "createButtonLink" })
    @Html.ActionLink(Resources.MustHaveSongs, "Index", "MustHaveSongs", null, new { @class = "songsButtonLink" })
    @Html.ActionLink(Resources.WeddingPhotos, "Index", "WeddingPhotos", null, new { @class = "photoButtonLink" })
</div>

<div id="map_canvas" style="margin: 0; padding: 0; height: 200px">
</div>


@section Scripts {

    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/slideshow")

    


    <script type="text/javascript">

        $(function () {
            $(".rslides").responsiveSlides();
            $("#accordion").accordion({
                collapsible: true,
                heightStyle: "content"
            });

            $("#accordion").bind('accordionactivate', function (event, ui) {
                if (ui.newPanel.attr('id') == 'mapTab' && !map) {
                    map = initializeMap();
                }
            });
            $(".createButtonLink").button({
                icons: {
                    primary: "ui-icon-plus"
                }
            });
            $(".editButtonLink").button({
                icons: {
                    primary: "ui-icon-pencil"
                }
            });
            $(".songsButtonLink").button({
                icons: {
                    primary: "ui-icon-star"
                }
            });
            $(".photoButtonLink").button({
                icons: {
                    primary: "ui-icon-image"
                }
            });
        });
    </script>
    
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
        var map = null;
        var latlng = new google.maps.LatLng(32.334167, -95.3);
        function initializeMap() {
            var myOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            return new google.maps.Map($('#map_canvas')[0], myOptions);
        }

  </script>
}


